<template>
    <ElConfigProvider :locale="zhCn">
        <RouterView v-if="isMicroApp" />
        <template v-else>
            <!-- 地图 -->
            <LayoutMap />
            <!-- 整体缩放元素 -->
            <div id="mainApp" :style="{ ...mainAppStyle }">
                <!-- 布局背景 -->
                <LayoutBg />
                <!-- 头部标题 -->
                <LayoutHeader />
                <!-- RouterView -->
                <RouterView :key="$route.name" />
                <!-- 布局菜单 -->
                <LayoutMenus />
            </div>
        </template>
    </ElConfigProvider>
</template>

<script setup lang="ts">
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import LayoutBg from '@/components/LayoutBg/index.vue'
import LayoutHeader from '@/components/LayoutHeader/index.vue'
import LayoutMap from '@/components/LayoutMap/index.vue'
import LayoutMenus from '@/components/LayoutMenus/index.vue'
import { useGlobalStore } from '@/store/global'

// 全局数据
const globalStore = useGlobalStore()
// 容器样式
const mainAppStyle = ref({})
// 是否是微应用
const isMicroApp = computed(() => {
    return window.__MICRO_APP_ENVIRONMENT__
})

onMounted(() => {
    setSize()
    setScale()
    window.addEventListener('resize', setScale)

    if (isMicroApp.value) {
        window.microApp.addDataListener((data: any) => {
            globalStore.changePageLeft(data.showPageLeft)
            globalStore.changePageRight(data.showPageRight)
        }, true)
    }
})

const frameWidth = ref(0)
const frameHeight = ref(0)
const setSize = () => {
    const width = globalStore.screenRatio16_9 ? 1920 : 3840
    const height = 1080
    frameWidth.value = width || screen.width
    frameHeight.value = height || screen.height
    mainAppStyle.value = {
        transformOrigin: '0 0',
        minWidth: frameWidth.value + 'px',
        minHeight: frameHeight.value + 'px'
    }
}
const setScale = () => {
    const bodyWidth = document.body.clientWidth
    const bodyHeight = document.body.clientHeight
    const scaleX = bodyWidth / frameWidth.value
    const scaleY = bodyHeight / frameHeight.value
    
    mainAppStyle.value = {
        transformOrigin: 'left top',
        transform: `scale(${scaleX},${scaleY})`,
        position: 'absolute',
        top: 0,
        left: 0,
        width: frameWidth.value + 'px',
        height: frameHeight.value + 'px',
        pointerEvents: 'none'
    }
}
</script>
